import React from "react";
import App, { Container } from "next/app";
import { Provider, observer, inject } from "mobx-react";
import store from "../store/index";
import Router from "next/router";
import NProgress from "nprogress";

export default class MyApp extends App {
	static async getInitialProps({ Component, ctx }) {
		let pageProps = {};
		if (Component.getInitialProps) {
			pageProps = await Component.getInitialProps(ctx, store);
		}
		return { pageProps };
	}

	componentDidMount() {
		Router.onRouteChangeStart = () => NProgress.start();
		Router.onRouteChangeComplete = () => NProgress.done();
		Router.onRouteChangeError = () => NProgress.done();
	}
	
	render() {
		const { Component, pageProps } = this.props;
		const ObserverComponent = inject(store => store)(observer(Component));
		return (
			<React.Fragment>
				<Container>
					<Provider {...store}>
						<ObserverComponent {...pageProps} />
					</Provider>
				</Container>
			</React.Fragment>
		);
	}
}

